<template>
  <div class="aalyfor">
    <div class="left">
      <SubtTitle
        name="会诊申请"
        icon-name="operate"
        has-icon
        style="margin-bottom: 10px"
      ></SubtTitle>
      <el-form ref="formrules" :model="formData" :rules="rules">
        <h4 style="font-size: 0.06005rem">会诊级别</h4>
        <el-form-item prop="type">
          <el-radio-group v-model="formData.type">
            <el-radio label="普通会诊" @change="ChangeconsType(1)" />
            <el-radio label="急会诊" @change="ChangeconsType(2)" />
          </el-radio-group>
        </el-form-item>
        <h4 style="line-height: 36px; font-size: 0.06005rem">申请人手机号</h4>
        <el-form-item prop="phone">
          <el-input
            placeholder="请输入手机号"
            v-model="formData.phone"
            @change="Changephone"
          />
        </el-form-item>
        <h4 style="line-height: 36px; font-size: 0.06005rem">申请理由</h4>
        <el-form-item>
          <el-input
            autosize
            placeholder="请填写申请理由"
            type="textarea"
            :rows="6"
            maxlength="100"
            v-model="formData.reasonApplication"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="patmsg">
        <div class="pat-info">
          <img src="@/assets/home/avtar.png" alt="" class="avtar" />
          <div class="msg">
            <div>{{ patData.name }}</div>
            <div>{{ patData.sex == "1" ? "男" : "女" }}</div>
            <div>{{ patData.age }}</div>
            <div>{{ patData.rank }}</div>
            <div>{{ patData.office }}</div>
          </div>
        </div>
        <div class="diagnose">
          {{ patData.diagnose }}
        </div>
        <div class="footer">主治医师：{{ patData.attendingPhysician }}</div>
      </div>
      <div class="export">
        <div class="title">邀请专家</div>
        <div class="data">
          <div class="list" v-for="item in showExportlist">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="center">
        <div class="tizheng">
          <SubtTitle
            name="体征数据"
            icon-name="operate"
            has-icon
            style="margin-bottom: 10px"
          ></SubtTitle>
          <humanMonitor />
        </div>

        <div class="yyqk">
          <medication />
        </div>
      </div>

      <div class="zjlb">
        <SubtTitle
          name="专家列表"
          icon-name="operate"
          has-icon
          style="margin-bottom: 10px"
        ></SubtTitle>

        <exportList @updateMessage="handleMessageUpdate"></exportList>

        <div class="box-bottom">
          <div class="btn">
            <div class="cancel" @click="onCancel">取消</div>
            <div class="apply" @click="onApply">申请</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
import SubtTitle from "@/components/Title/subtTitle.vue";
import svgIcon from "@/components/Svg/svg-icon.vue";
import humanMonitor from "./components/humanMonitor.vue";
import medication from "./components/medication.vue";
import exportList from "./components/exportList.vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

// 申请会诊条件校验
const formData = reactive({
  type: 2,
  startTime: "",
  phone: "",
  reasonApplication: "",
});

const rules = reactive({
  type: [{ required: true, message: "请选择会诊类型", trigger: "change" }],
  phone: [
    { required: true, message: "请输入申请人手机号", trigger: "change" },
    { pattern: /^1[3-9]\d{9}$/, message: "请输入合法的手机号" },
  ],
});

// 体征数据
const getLastSignList = ref([]);

// 显示被邀请的专家
const showExportlist = ref([]);
const handleMessageUpdate = (newMessage) => {
  console.log(newMessage, "222");
  showExportlist.value = newMessage;
};

// 接受患者数据
const patData = ref(route.query);
onMounted(() => {
  console.log(patData.value);
});

// 申请
const onApply = () => {
    router.push('/RequestConsultation')
};

// 取消
const onCancel = () => {
  router.push("/patientCard");
};
</script>
<style scoped lang="scss">
@mixin bg() {
  padding: 10px;
  border-radius: 12px;
  background: rgba(33, 33, 33, 0.41);
  box-shadow: 0px 0px 10.2px 1px rgba(148, 148, 148, 0.13) inset;
  background: linear-gradient(
    112.04deg,
    rgba(67, 213, 199, 0.12) 1.24%,
    rgba(82, 80, 80, 0) 64.01%
  );
  border: 1px solid;
  border-image-source: linear-gradient(
    130.78deg,
    rgba(0, 0, 0, 0.1) 55.65%,
    rgba(67, 213, 199, 0.2) 94.34%
  );
}
.aalyfor {
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 120px);

  .left {
    width: 20%;
    @include bg();
    height: calc(100vh - 120px);
    padding: 14px;
    overflow: hidden;

    .patmsg {
      @include bg();
      height: 28%;
      margin-bottom: 20px;
      .pat-info {
        display: flex;
        .msg {
          margin-left: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          div {
            margin-right: 5px;
            color: #fff;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: 24px; /* 100% */
          }
        }
      }
      .diagnose {
        color: #fff;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px; /* 100% */
        margin-top: 20px;
      }
      .footer {
        color: #fff;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px; /* 100% */
        margin-top: 20px;
      }
    }
    .export {
      @include bg();
      height: 30%;
      .title {
      }
      .data {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 一行显示两个元素 */
        gap: 10px;
        .list {
          margin: 2px 0px;
          @include bg();
        }
      }
    }
  }
  .box {
    width: 79%;
    display: flex;
    justify-content: space-between;

    .center {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 30%;
      height: calc(100vh - 120px);
      @include bg();
      .tizheng {
        @include bg();
      }

      .yyqk {
        @include bg();
        height: 260px;
      }
    }
    .zjlb {
      width: 69%;
      padding: 15px;
      height: calc(100vh - 254px);
    }

    .box-bottom {
      @include bg();
      height: 80px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: right;

      .btn {
        display: flex;
        .cancel {
          width: 120px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 16px;
          border-radius: 10px;
          background: #f3124a;
          background: linear-gradient(
            112.04deg,
            rgba(190, 140, 148, 0.933) 33.24%,
            rgba(206, 135, 87, 0.808) 100%
          );
          cursor: pointer;

          margin-right: 20px;
        }
        .apply {
          width: 120px;
          line-height: 40px;
          height: 40px;
          text-align: center;
          cursor: pointer;
          font-size: 16px;
          border-radius: 10px;
          background: linear-gradient(
            112.04deg,
            rgba(100, 128, 113, 0.933) 33.24%,
            rgba(157, 227, 212, 0.813) 100%
          );
        }
      }
    }
  }
}

:deep(.el-input__wrapper) {
  background: #000;
}
:deep(.el-textarea__inner) {
  background: #000;
}
:deep(.el-table th.el-table__cell) {
  background: #25413f;
  font-size: 14px;

  color: #ffffffcc;
}
:deep(.el-table__body-wrapper) {
  background: #ffffff03 !important;
  font-size: 13px;
}
:deep(.el-table) {
  background: #ffffff03;
}
:deep(.el-table__body-wrapper) {
  background: #ffffff03;
}
:deep(.el-table tr) {
  background: #ffffff0f;
}
:deep(
    .el-table--striped
      .el-table__body
      tr.el-table__row--striped
      td.el-table__cell
  ) {
  background: #ffffff0f;
}
:deep(.el-radio__label) {
  color: #fff;
  font-size: 16px;
}
:deep(.el-input__inner) {
  color: #fff;
}

:deep(.el-textarea__inner) {
  color: #fff;
}
</style>
